import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Form, Input,  Radio, Popover } from 'antd'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
import 'styles/setting/workflow/new-workflow.scss'
import LanguageInput from 'components/template/language-input/language-input'
import workflowUtil from 'containers/setting/new-workflow/utils'

class NewNodeApproveAi extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      basicInfo: props.basicInfo,
      copyBasicInfo: {},
      approvalAction: props.basicInfo.approvalActions
    }
  }

  componentDidMount() {
    this.setState({
      basicInfo: this.props.basicInfo,
    })
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      basicInfo: nextProps.basicInfo,
    })
  }

  onChange = (e, attr) => {
    let { basicInfo } = this.state;
    basicInfo[attr] = e;
    this.setState({ basicInfo });
    this.props.onChangeAttr(e, attr);
  };

  handleRemarkChange = (value, i18n) => {
    this.onChange(value, 'remark');
    this.onChange({ remark: i18n }, 'i18n');
  };

  render() {
    const { chosenNodeType, language } = this.props;
    const { basicInfo } = this.state;
    const formItemLayout = {
      labelCol: { span: language.code === 'zh_cn' ? 3 : 4 },
      wrapperCol: { span: language.code === 'zh_cn' ? 21 : 20 },
    };

    return (
      <div className="node-approve-ai">
        <FormItem {...formItemLayout} label={messages('setting.key1372'/*节点名称*/)} colon={false}>
          <LanguageInput
            name={basicInfo.remark }
            width={300}
            inpRule={workflowUtil.getInpRule(100, this.props.languageList)}
            i18nName={basicInfo.i18n && basicInfo.i18n.remark}
            isEdit
            nameChange={this.handleRemarkChange}
          />
        </FormItem>
        <FormItem {...formItemLayout} label={messages('setting.key1373'/*节点类型*/)} colon={false}>
          {
            chosenNodeType === 1003 ?
              <RadioGroup value={basicInfo.approvalActions} onChange={e => {
                this.onChange(e.target.value, 'approvalActions')
              } }>
                <Radio value="8001">
                  {messages('setting.key1374'/*通过*/)}
                  <Popover content={messages('setting.key1375'/*符合审批条件则系统自动审批通过,否则自动跳过到下一个节点*/)}>
                    <span className="approve-type-notice">
                      {messages('setting.key1375'/*符合审批条件则系统自动审批通过,否则自动跳过到下一个节点*/)}
                    </span>
                  </Popover>
                </Radio>
                <Radio value="8002">
                  {messages('setting.key1376'/*驳回*/)}
                  <Popover content={messages('setting.key1377'/*符合审批条件则系统自动审批驳回,否则自动跳过到下一个节点*/)}>
                  <span className="approve-type-notice">
                    {messages('setting.key1377'/*符合审批条件则系统自动审批驳回,否则自动跳过到下一个节点*/)}
                    </span>
                  </Popover>
                </Radio>
              </RadioGroup> :
              <div style={{ color: '#aaa' }}>{messages('setting.key1737')/*满足审批条件，则系统自动产生信用付款，否则跳过。*/}</div>}
        </FormItem>
        <FormItem {...formItemLayout} label={messages('setting.key1378'/*审批意见*/)} colon={false}>
            <TextArea value={basicInfo.comments} onChange={e => this.onChange(e.target.value, 'comments')}
                      placeholder={basicInfo.type === 1007 ? messages('setting.key1739')/*满足条件，系统自动产生信用付款*/ :
                        (basicInfo.approvalActions === '8001' ? messages('setting.key1379'/*系统自动通过*/) :
                          messages('setting.key1380'/*系统自动驳回*/))}
                      rows={2} style={{ resize: 'none', width: 400 }}/>
        </FormItem>
      </div>
    )
  }
}

NewNodeApproveAi.propTypes = {
  basicInfo: React.PropTypes.object,
  basicInfoSaveHandle: React.PropTypes.func, //基本信息保存成功的回调
  chosenNodeType: React.PropTypes.number,
  onChangeAttr: React.PropTypes.func,//更改信息的回调 值&属性名
};

NewNodeApproveAi.contextTypes = {
  router: React.PropTypes.object,
};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList,
    language: state.main.language
  }
}

const wrappedNodeApproveAi = Form.create()(NewNodeApproveAi);

export default connect(mapStateToProps)(wrappedNodeApproveAi)
